<template>
  
    <el-card class="card" shadow="hover" v-if="IsShow">
      <n-tabs default-value="signin" size="large" justify-content="space-evenly">
      <n-tab-pane name="signin" tab="登录" >
        <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item-row label="手机号" path="phone">
            <n-input v-model:value="model.phone" placeholder="Phone Number"  />
          </n-form-item-row>
          <n-form-item-row label="验证码" path="code">
            <n-input v-model:value="code" />
            <n-button attr-type="button" :disabled="Isclick" @click="handleValidateClick">
              验证
            </n-button>
          </n-form-item-row>
         
        </n-form>
        <n-button type="primary" @click="submmit" block round secondary strong>
          登录
        </n-button>
        <el-row>
          <el-col :span="8" style="padding-top: 10px;"> 
            <n-button text @click="IsShow = !IsShow">
              账号密码登录
            </n-button>
          </el-col>

        </el-row>
 
       
      </n-tab-pane>
      <n-tab-pane name="signup" tab="注册">
        <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item-row label="用户名"  path="username">
            <n-input  v-model:value="model.username"/>
          </n-form-item-row>
          <n-form-item-row label="密码" path="password">
            <n-input v-model:value="model.password"
                     type="password"
                    
                     @keydown.enter.prevent />
          </n-form-item-row>

              <n-form-item-row
                  first
                  path="ConfirmPassword"
                  label="重复密码"
                >
                <n-input
                  v-model:value="SecondPassword"
                  :disabled="!model.password"
                  type="password"
                  @keydown.enter.prevent
                />
              </n-form-item-row>
         
          <n-form-item-row label="手机号" path="phone">
            <n-input v-model:value="model.phone" placeholder="Phone Number"  />
          </n-form-item-row>
          <n-form-item-row label="验证码">
            <n-input />
            <n-button attr-type="button" @click="handleValidateClick">
              验证
            </n-button>
          </n-form-item-row>
        </n-form>
        <n-button type="primary" block round secondary strong>
          注册
        </n-button>
      </n-tab-pane>
    </n-tabs>
    <el-divider style="margin-bottom: 10px;"/>
    <span class="text-span">注册或登录即代表您同意《用户协议》和《隐私协议》</span>
    </el-card>
    <el-card class="card" shadow="hover" v-if="!IsShow" >
      <n-tabs default-value="signin" size="large" justify-content="space-evenly">
      <n-tab-pane name="signin" tab="登录">
        <n-form>
          <n-form-item-row label="用户名">
            <n-input />
          </n-form-item-row>
          <n-form-item-row label="密码">
            <n-input />
          </n-form-item-row>
        </n-form>
        <n-button type="primary" block secondary strong>
          登录
        </n-button>
        <el-row>
          <el-col :span="8" style="padding-top: 10px;"> 
            <n-button text @click="IsShow = !IsShow">
              手机号登录
            </n-button>
          </el-col>
          </el-row>
      </n-tab-pane>
      <n-tab-pane name="signup" tab="注册">
        <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item-row label="用户名"  path="username">
            <n-input  v-model:value="model.username"/>
          </n-form-item-row>
          <n-form-item-row label="密码" path="password">
            <n-input v-model:value="model.password"
                     type="password"
                    
                     @keydown.enter.prevent />
          </n-form-item-row>

              <n-form-item-row
                  first
                  path="ConfirmPassword"
                  label="重复密码"
                >
                <n-input
                  v-model:value="SecondPassword"
                  :disabled="!model.password"
                  type="password"
                  @keydown.enter.prevent
                />
              </n-form-item-row>
         
          <n-form-item-row label="手机号" path="phone">
            <n-input v-model:value="model.phone" placeholder="Phone Number"  />
          </n-form-item-row>
          <n-form-item-row label="验证码">
            <n-input />
            <n-button attr-type="button" @click="handleValidateClick">
              验证
            </n-button>
          </n-form-item-row>
        </n-form>
        <n-button type="primary" block round secondary strong>
          注册
        </n-button>
      </n-tab-pane>
    </n-tabs>
    <el-divider style="margin-bottom: 10px;"/>
    <span class="text-span">注册或登录即代表您同意《用户协议》和《隐私协议》</span>
    </el-card>
  </template>

  

<script lang="ts" setup>
import { ref ,reactive} from 'vue';
import { FormInst,
  FormItemRule,
  useMessage,
  FormRules} from 'naive-ui'
import userInfo from '@/pojo/entity'
import BaseUrl from '@/config/BaseUrl.json'
import axios from 'axios';
const IsShow=ref(true);
const Isclick=ref(false)
const message = useMessage()

const formRef = ref<FormInst | null>()
//重复密码
const SecondPassword=ref<string | null>()

const modelRef = reactive<userInfo>({
    uuid: null,
    username: null,
    password: null,
    nickname: null,
    school: null,
    course:  null,
    number: null,
    realname:  null,
    gender: null,
    github:null,
    blog:  null,
    cfUsername:  null,
    email:null,
    avatar:null,
    signature:  null,
    titleName:null,
    titleColor:  null,
    status: null,
    gmtCreate:  null,
    gmtModified:  null,
    phone: null
    })
    const model=modelRef
    //验证码
    const code=ref<string | null>()
    //UUID
    var UUID:string | null= null;


    const rules: FormRules = {
      password: [
      {
      required: true,
      validator (rule, value) {
        if (!value) {
          return new Error('密码不能为空！')
        } else if (!/^[a-zA-Z0-9_-]{6,10}$/.test(value)) {
          return new Error('应设置6至10位的密码(字母、数字、下划线、减号)！')
        }
        return true
      },
      trigger: [ 'input', 'blur' ]
     }

      ],
      ConfirmPassword: [
        {
          
          message: '请再次输入密码',
          trigger: [ 'blur']
        },
        {
          validator: (rule: FormItemRule, value: string)=>{
              return (
                  !!modelRef.password &&
                  modelRef.password.startsWith(SecondPassword.value) &&
                  modelRef.password.length >= SecondPassword.value.length
                );
          },
          message: '两次密码输入不一致',
          trigger: 'input'
        },
        {
          validator: (rule: FormItemRule, value: string)=>{
            return SecondPassword.value === modelRef.password
          },
          message: '两次密码输入不一致',
          trigger: ['blur', 'password-input']
        }
      ],
      phone: {
          required: true,
          message: '手机号格式不正确',
          trigger: ['input'],
          validator: (rule: FormItemRule, value: string) => {
            return  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)
          }
        }
    }





//验证码
const handleValidateClick=(e: MouseEvent) =>{
       e.preventDefault()
       Isclick.value=true;
        const messageReactive = message.loading('验证码已发送,等待验证', {
          duration: 6000,
        })

        setTimeout(()=>{
         Isclick.value=false;
         axios.get(`${BaseUrl.API_URL}`+"/user/getcode",{
          
            params:{
              phone:modelRef.phone
            }
          
        
         }).then((res)=>{
          UUID=res.data.data
         }).catch(err=>console.log(err))
        },6000)

        messageReactive.destroy();
       
      }
//登录
const submmit=()=>{
  axios.post(`${BaseUrl.API_URL}`+"/user/login/code",null,{
         params:{
          UUID:UUID,
          phone:modelRef.phone,
          code:code.value
         }
         }).then((res)=>{
            console.log(res.data.code)
         }).catch(err=>console.log(err))
}
    


</script>

<style scoped>
  .card{
    width: 400px;
    height: 600px;
    transform: translateX(650px) translateY(100px);
    border-radius:8px;

  }
  .text-span{
    font-size: 15px;
  
  }
 
 

</style>